/**
 * @author CT
 * @email 994599447@qq.com
 * @date 2017.8.21
 */

'use strict';

import React, { Component } from 'react';
import { StyleSheet,TouchableNativeFeedback,DatePickerAndroid } from 'react-native'
import {
    Container,
    Button,
    Text,
    Header,
    Left,
    Body,
    Content,
    Right,
    Title,
    Icon,
    List,
    Item,
    View,
    Input,
    ActionSheet,
    Toast,
    Switch,
} from 'native-base';
import * as I18n from '../config/i18n'
import Ionicons from 'react-native-vector-icons/Ionicons'
import * as config from '../config/appConfig'
import Utils from '../common/utils'
import * as Storage from '../common/storage'
import { remindDatas,atTopRemindData } from '../actions/homeActions'

/**
 * 添加提醒
 */
export default class AddRemindPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            id:Utils.generateUUID(),    //唯一ID
            title:'',
            remindTypeIndex:0,          //提醒分类索引
            selectDate:new Date(),      //提醒日期
            isAtTop:false,          //是否置顶
        };

        this._onSaveRemind = this._onSaveRemind.bind(this);
    }

    //绘制标题栏
    _renderTitleBar = () => {
        return (
            <Header
                androidStatusBarColor="#00797e"
                style={{backgroundColor:'#00adb4'}}>
                <Left>
                    <Button transparent light onPress={()=>{this.props.navigation. goBack()}}>
                        <Icon name='arrow-back' />
                    </Button>
                </Left>
                <Body>
                    <Title>{I18n.t('edit_remind.add_title')}</Title>
                </Body>
                <Right>
                    <Button transparent light onPress={()=>{this._onSaveRemind()}}>
                        <Icon name='md-checkmark' />
                    </Button>
                </Right>
            </Header>
        );
    }


    //提醒分类选择
    _selectActionSheet = () => {
        let options = [];
        for(let i=0;i<config.RemindType.length;i++){
            options.push(config.RemindType[i].name);
        }
        ActionSheet.show({
                options: options,
                cancelButtonIndex: this.state.remindTypeIndex,
                // destructiveButtonIndex: DESTRUCTIVE_INDEX,
                title: I18n.t('edit_remind.select_type')
            },
                buttonIndex => {
                    this.setState({remindTypeIndex:buttonIndex});
            });
    }

    //提醒日期选择
    _selectDate = async () => {
        try {
            let {action, year, month, day} = await DatePickerAndroid.open({
              date: this.state.selectDate
            });
            if (action !== DatePickerAndroid.dismissedAction) {
              // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
              this.setState({selectDate:new Date(year, month, day)});
            }
          } catch ({code, message}) {
            console.warn('Cannot open date picker', message);
          }
    }

    //保存倒计时
    _onSaveRemind = () => {
        if(this.state.title == ''){
            Utils.showToast(I18n.t('edit_remind.remind_title_null'),'danger');
            return ;
        }
        //倒计时数据
        let data = {
            id:this.state.id,
            title:this.state.title,
            date:this.state.selectDate.Format("yyyy-MM-dd"),
            type:this.state.remindTypeIndex
        };
        //保存到本地
        Storage.saveForKeyId(config.StorageKey.RemindDate,this.state.id,data);
        //置顶
        if(this.state.isAtTop){
            Storage.save(config.StorageKey.AtTopId,this.state.id);
        }
        //刷新倒计时数据
        this.props.dispatch(remindDatas());
        this.props.dispatch(atTopRemindData());
        this.props.navigation.goBack();
    }

    


    render() {
        return (
            <Container>
                {this._renderTitleBar()}
                <Content style={{paddingTop:10}}>
                    <Item style={styles.item}>
                        <Text style={[styles.txtSize,styles.itemTitle]}>{I18n.t('edit_remind.remind_title')}</Text>
                        <Input style={styles.txtSize} maxLength={20} placeholder={I18n.t('edit_remind.remind_title_placeholder')} onChangeText={(title)=>{this.setState({title})}} />
                        {/* <Icon name='close-circle' color='#ccc' /> */}
                    </Item>

                    <Item style={styles.item} onPress={()=>{this._selectDate()}}>
                        <Text style={[styles.txtSize,styles.itemTitle]}>{I18n.t('edit_remind.remind_date')}</Text>
                        <Right>
                            <View style={[styles.center,{flexDirection:'row'}]}>
                                <Text style={[styles.txtSize,styles.itemRightTxt]}>{this.state.selectDate.Format("yyyy-MM-dd")} {I18n.t('unit.week')}{Utils.getWeekDay(this.state.selectDate.toLocaleString())}</Text>
                                <Ionicons name = 'ios-arrow-forward' size = {20} color = '#BFBFBF'/>
                            </View>
                        </Right>
                    </Item>

                    <Item style={styles.item} onPress={()=>{this._selectActionSheet()}}>
                        <Text style={[styles.txtSize,styles.itemTitle]}>{I18n.t('edit_remind.remind_category')}</Text>
                        <Right>
                            <View style={[styles.center,{flexDirection:'row'}]}>
                                <Text style={[styles.txtSize,styles.itemRightTxt]}>{config.RemindType[this.state.remindTypeIndex].name}</Text>
                                <Ionicons name = 'ios-arrow-forward' size = {20} color = '#BFBFBF'/>
                            </View>
                        </Right>
                    </Item>

                    <Item style={styles.item}>
                        <Text style={[styles.txtSize,styles.itemTitle]}>{I18n.t('edit_remind.remind_at_top')}</Text>
                        <Right>
                            <Switch value={this.state.isAtTop} onValueChange={(value)=>{this.setState({isAtTop:value})}} />
                        </Right>
                    </Item>

                    {/*<Item style={[styles.item,{marginTop:10}]}>
                        <Text style={[styles.txtSize,styles.itemTitle]}>背景</Text>
                        <Right>
                            <Ionicons name = 'ios-arrow-forward' size = {20} color = '#BFBFBF'/>
                        </Right>
                    </Item>*/}

                 </Content>
            </Container>
        );
    }

}

const styles = StyleSheet.create({
    center:{
        alignItems: 'center',
        justifyContent: 'center',
    },
    txtSize:{
        fontSize:15
    },
    item:{
        backgroundColor: 'white',
        paddingLeft: 10,
        paddingRight: 10,
        height: 50,
    },
    itemTitle:{
        marginRight: 10,
    },
    itemRightTxt:{
        color: '#B3B3B3',
        marginRight: 5,
    },
});